<template>
    <div>
        <ul>
            <li @click="com='Demoa'" class="red">推荐</li>
            <li @click="com='Demob'">手表行情</li>
            <li v-for="(item,index) in arr" :key="index">{{item}} </li>
        </ul>
        <keep-alive>
            <component :is="com"></component>
        </keep-alive>
    </div>
</template>

<script>
import Demoa from "@/components/ziXun/demoa.vue"
import Demob from "@/components/ziXun/demob.vue"
import {one} from "@/api/topapi.js"
export default {
    data(){
        return{
            com:"Demoa",
            arr:[]
        }
    },
    mounted(){
        one().then((ok)=>{
            this.arr=ok.data.demoaL
        })
    },
    components:{
        Demoa,
        Demob
    }
}
</script>

<style scoped>
    ul{
        width: 100%;
        height: 0.44rem;
        background-color: #fff;
        margin-top: 0.47rem;
        position: fixed;
        top: 0rem ;
        z-index: 2;
        display: flex;
        /* justify-content: space-evenly; */
         overflow: auto;

    }
    li{
        list-style: none;
        font-size: 0.14rem;
        color: #333;
        line-height: 0.44rem;
        white-space: nowrap;
        margin-right: 0.15rem;
    }
     .red{
        color: #ccaa7a;
    }
</style>